<template>
  <el-drawer
    size="700px"
    v-model="visible"
    direction="rtl"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <template #header>
      <div v-if="props.id" class="drawer-header">
        <el-icon><Edit/></el-icon>
        编辑
      </div>
      <div v-else  class="drawer-header">
        <el-icon><CirclePlus/></el-icon>
        新增
      </div>
    </template>
    <el-form ref="formRef" :model="formState" label-position="top" :rules="rules" v-loading="state.subLoading">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item prop="areaName" label="城市名称">
            <el-input id="areaName" v-model="formState.areaName" placeholder="请输入城市名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="parentId" label="上级地区">
            <el-cascader id="parentId" v-model="defaultParentIds" :options="parentOptions" :props=fieldNames
                         placeholder="请选择上级地区" change-on-select clearable style="width: 100%"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item prop="shortName" label="城市短名称">
            <el-input id="shortName" v-model="formState.shortName" placeholder="请输入城市短名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="grade" label="城市级别">
            <el-input id="grade" v-model="formState.grade" placeholder="请输入城市级别" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item prop="zipCode" label="邮政编码">
            <el-input id="zipCode" v-model="formState.zipCode" placeholder="请输入邮政编码" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="fullName" label="城市路径">
            <el-input id="fullName" v-model="formState.fullName" placeholder="请输入城市路径" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item prop="lng" label="经度">
            <el-input id="lng" v-model="formState.lng" placeholder="请输入经度" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="lat" label="纬度">
            <el-input id="lat" v-model="formState.lat" placeholder="请输入纬度" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item prop="pinyin" label="拼音">
            <el-input id="pinyin" v-model="formState.pinyin" placeholder="请输入拼音" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="letter" label="字母">
            <el-input id="letter" v-model="formState.letter" placeholder="请输入字母" clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button type="primary" @click="handleOk(formRef)" :loading="state.subLoading" :icon="Select">
          保存
        </el-button>
        <el-button @click="handleClose" :icon="Back">返回列表</el-button>
      </div>
    </template>
  </el-drawer>

</template>

<script setup name="CityAreaDetail">
import {CityAreaApi} from '@/api/system/cityArea';
import useCurrentInstance from '@/hooks/useCurrentInstance';
import {detailState, rules, state, setSubLoading} from "../index";
import { CirclePlus, Back, Edit, Select } from '@element-plus/icons-vue';

const {proxy} = useCurrentInstance();
const emits = defineEmits(["refreshData"]);
let formState = toRef(detailState);
const formRef = ref();
const visible = ref(false);
const parentOptions = ref([]);
const defaultParentIds = ref([]);
const props = defineProps({
  id: {
    type: String,
    required: false,
  },
  drawer: {
    type: Boolean,
    required: true,
  }
});
const fieldNames = {
  label: 'areaName',
  value: 'id',
  children: 'children',
  checkStrictly: true
}
function handleOk(formEl) {
  if (defaultParentIds.value && defaultParentIds.value.length > 0) {
    formState.value.parentId = defaultParentIds.value[defaultParentIds.value.length - 1];
  } else {
    formState.value.parentId = 0;
  }
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      setSubLoading(true);
      if (formState.value.id) {
        CityAreaApi.update(formState.value).then(res => {
          if (res.success) {
            proxy.$message.success(res.message);
            handleClose();
          } else {
            proxy.$message.error(res.message);
          }
        });
      } else {
        CityAreaApi.save(formState.value).then(res => {
          if (res.success) {
            proxy.$message.success(res.message);
            handleClose();
          } else {
            proxy.$message.error(res.message);
          }
        });
      }
      setSubLoading(false);
    } else {
      console.log('error submit!', fields)
    }
  })
}

//关闭弹窗
function handleClose() {
  formRef.value?.resetFields()
  emits('refreshData');
  resetData();
}

//初始化数据
function initInfo(id) {
  setSubLoading(true);
  CityAreaApi.findById({id}).then((res) =>{
    if (res.success) {
      formState.value = res.data;
    }
  }).catch((e) => {
    console.log(e);
  }).finally(() => {
    setSubLoading(false);
  });
}

function findParentTree() {
  CityAreaApi.findTree().then((res) => {
    if (res.success) {
      parentOptions.value = res.data;
    }
  })
}

//重置数据
function resetData() {
  formState.value = detailState;
}
//监听props.visible 值得变化
watch(() => props.drawer, v => {
  visible.value = v;
  if (v) {
    findParentTree();
  }
})
defineExpose({
  initInfo,
})

</script>

<style scoped></style>
